<template>
  <div class='base-chart' style="position: relative">
    <loading></loading>
    <error></error>
    <div class="legend g-legend-wrapper">
      <span class="g-legend-title g-font-f4">
        <span class="g-font-f5"  ref="blank">{{currentDate == '今日' ? currentDate : currentDate | dashFormat}}</span>
      </span>
      <div class="g-legend-content">
        <span :class="['g-font-f5', 'g-legend-item', NetNum>0?'red':'green']">
        {{NetNum>0?options.netPositiveText:options.netNegativeText}}
           <span class="number">{{ NetNum | netNumFilter(GainNum, SlipNum) }}</span>
           {{ NetNum | textOfLg }}
        </span>
        <span class="g-font-f5 g-legend-item blue">{{IndexText}}
           <span class="number">{{IndexNum | toFixed2}}</span>
       </span>
        <span class="g-font-f5 g-legend-item red-light">{{options.positiveText}}
           <span class="number">{{ GainNum | numOfLg }}</span>
           {{ GainNum | textOfLg }}
        </span>
        <span class="g-font-f5 g-legend-item green-light">{{options.negativeText}}
           <span class="number">{{ SlipNum | numOfLg }}</span>
           {{ SlipNum | textOfLg }}
       </span>
      </div>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>
<script>
  import echarts from 'echarts/lib/echarts';
  import 'echarts/lib/chart/bar';
  // 引入提示框和标题组件
  import 'echarts/lib/component/tooltip';
  import { numOfLg, textOfLg } from '@/filters/legendFormat'
  import { max, min, extend, destruct, floatAdd } from '@/common/common'
  import { pointFormat, dashFormat } from '@/filters/dataTime'

  let midPoint;
  const option = {
    grid: {
      top: '15%',
      bottom: '15%',
      left: '13%',
      right: '13%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    xAxis: [
      {
        type: 'category',
        splitLine: {
          show: true,
          lineStyle: {
            opacity: 0.7,
            type: 'dotted',
            color: '#bac9d8'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            fontSize: 10,
            color: '#a5a5a5'
          }
        }
      }
    ],
    yAxis: [{
      name: '资金(亿元)',
      nameTextStyle: {
        color: '#555'
      },
      splitLine: {
        lineStyle: {
          opacity: 0.7,
          type: 'dotted',
          color: '#bac9d8'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          fontSize: 10,
          color: '#a5a5a5'
        },
        formatter: (val) => {
          return parseInt(val / 100000000)
        }
      }
    }, {
      axisLabel: {
        textStyle: {
          fontSize: 10,
          color: '#a5a5a5'
        },
        formatter: (val) => {
          return parseInt(val + midPoint)
        }
      },
      nameTextStyle: {
        color: '#555'
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },    // 隐藏刻度
      axisLine: {
        lineStyle: {
          type: 'dotted',
          color: '#bac9d8',
          opacity: 0.7
        }
      }
    }],
    series: [
      {
        name: '上证指数',
        yAxisIndex: 1,
        type: 'line',
        itemStyle: {
          normal: {
            color: '#6c9bd2'
          }
        },
        lineStyle: {
          normal: {
            width: 1,
            color: '#6c9bd2',
            type: 'dotted'
          }
        },
        smooth: true,
        symbol: `image://${require('@/assets/images/blueSymbol.svg')}`,
        showSymbol: false
      },
      {
        name: '净流入流出',
        type: 'bar',
        stack: 'one',
        itemStyle: {
          normal: {
            color: (params) => params.data > 0 ? '#e84b4b' : '#2cc05c'
          }
        }
      },
      {
        name: '流入',
        type: 'bar',
        stack: 'one',
        itemStyle: {
          normal: {
            color: '#f7b8b8'
          }
        }
      },
      {
        name: '流出',
        type: 'bar',
        stack: 'one',
        itemStyle: {
          normal: {
            color: '#ade7bf'
          }
        }
      }
    ]
  };

  export default{
    name: 'chart-overlap',
    data() {
      return {
        currentDate: '今日',
        dataIndex: ''
      }
    },
    props: {
      options: {
        type: Object,
        default: function () {
          return {
            netPositiveText: '净流入',
            netNegativeText: '净流出',
            positiveText: '流入',
            negativeText: '流出'
          }
        }
      },
      chartData: {
        type: Object,
        default: function () {
          return {
            xTime: '',
            in: '',
            out: '',
            indexData: ''
          }
        }
      },
      aid: {
        default: 0
      },
      tag: false
    },
    computed: {
      IndexText() {
        return ['上证指数', '上证指数', '深证指数', '创业板指数'][this.aid]
      },
      NetNum() {
        return this.chartData.netNumber ? this.chartData.netNumber[this.dataIndex] : '';
      },
      IndexNum() {
        return this.chartData.indexData ? this.chartData.indexData[this.dataIndex] + midPoint : '';
      },
      GainNum() {
        return this.chartData.in ? this.chartData.in[this.dataIndex] : '';
      },
      SlipNum() {
        return this.chartData.out ? this.chartData.out[this.dataIndex] : '';
      }
    },
    methods: {
      chartSelected(params) {
        this.dataIndex = params[0].dataIndex;
        this.currentDate = this.chartData.xTime[this.dataIndex]
      },
      renderChart (data) {
        this.myChart.clear();
        this.currentDate = this.chartData.xTime[this.dataIndex];

        const maxNum = max(this.chartData.indexData);
        const minNum = min(this.chartData.indexData);
        let INTERVAL = max([Math.abs(maxNum), Math.abs(minNum)]);
        INTERVAL = INTERVAL || 1;

        this.myChart.setOption(extend(option, {
          tooltip: {
            formatter: this.chartSelected
          },
          xAxis: [{
            data: this.tag ? data.xTime.map(v => pointFormat(v)) : data.xTime
          }],
          yAxis: [{}, {
            name: this.IndexText,
            max: (INTERVAL * 1.2).toFixed(2),
            min: -(INTERVAL * 1.2).toFixed(2),
            interval: (INTERVAL * 0.6)
          }],
          series: [{
            data: data.indexData
          }, {
            data: data.netNumber
          }, {
            data: data.in
          }, {
            data: data.out
          }]
        }));
        setTimeout(() => {
          this.$store.dispatch('hideLoading');
        }, 0)
      }
    },
    filters: {
      numOfLg,
      textOfLg,
      pointFormat,
      dashFormat,
      toFixed2(val) {
        return isNaN(val) ? '' : Number(val).toFixed(2)
      },
      netNumFilter(val, gain, slip) {
        const gData = destruct(gain);
        const sData = destruct(slip);
        const data = destruct(val);

        if (gData.unit == sData.unit && sData.unit == data.unit) {
          return Math.abs(floatAdd(gData.num, -sData.num));
        }

        return data.num;
      }
    },
    mounted() {
      this.$store.dispatch('showLoading');
      this.myChart = echarts.init(this.$refs.chart);
    },
    watch: {
      chartData: function (val) {
        midPoint = (max(val.indexData) + min(val.indexData)) / 2

        val.indexData = val.indexData.map(item => {
          return item === '' ? '' : item - midPoint
        });
        this.dataIndex = val.indexData.length - 1;
        this.dataIndex = this.dataIndex > 0 ? this.dataIndex : 0;
        this.renderChart(val)
      }
    },
    beforeDestroy () {
      echarts.dispose(this.myChart);
    }
  }
</script>
<style lang="less" scoped>
  .chart{
    width: 100%;
    height: 2.4rem;
  }
  .g-legend-title{
    width: 20%;
    text-align: left;
    line-height: 0.275rem;
  }
  .g-legend-item{
    width: 40%;
    padding-right: .1rem;
    line-height: 0.275rem;
    white-space: nowrap;
    &:before {
      margin-right: .05rem;
    }
  }
</style>
